<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="css/music.css" />
		<link rel="shortcut icon" href="//y.qq.com/favicon.ico?max_age=2592000">
		<title>QQ音乐 - 千万正版音乐海量无损曲库新歌热歌天天畅听的高品质音乐平台！</title>
	</head>

	<body>
		<div class="wrap">
			<header>
				<p></p>
				<a href="#">下载APP</a>
			</header>
			<ul class="nav">
				<li class="active">推荐 </li>
				<li>排行榜</li>
				<li>搜索</li>
			</ul>
			<!-------------第一页------------->
			<div class="see first active">
				<!--轮播图-->
				<div class="swiper-container">
					<div class="swiper-wrapper" id="slider">
						
					</div>
					<!-- 如果需要分页器 -->
					<div class="swiper-pagination"></div>
				</div>
				<div class="radio">
					<h2 class="list_title">电台</h2>
					<ul class="list_container">
						<li class="js_play_radio">
							<a class="list_main" href="javascript:;">
								<div class="list_media">
									<img src="https://y.gtimg.cn/music/photo/radio/track_radio_199_13_1.jpg?max_age=2592000" alt="">
									<span class="icon icon_play"></span>
								</div>
								<div class="list_info">
									<h3>热歌</h3>
								</div>
							</a>
						</li>
						<li class="js_play_radio">
							<a class="list_main" href="javascript:;">
								<div class="list_media">
									<img src="https://y.gtimg.cn/music/photo/radio/track_radio_307_13_1.jpg?max_age=2592000" alt="">
									<span class="icon icon_play"></span>
								</div>
								<div class="list_info">
									<h3>一人一首招牌歌</h3>
								</div>
							</a>
						</li>
					</ul>
				</div>
				<div class="radio">
					<h2 class="list_title">热门歌单</h2>
					<ul class="list_container" id="uuu">

					</ul>
					<p class="list_more">
						<a href="#">去客户端发现更多好音乐 &gt;</a>
					</p>
				</div>
				<footer>
					<div class="web">
						<a href="http://y.qq.com/?ADTAG=myqq&amp;nomobile=1#type=index">查看电脑版网页</a>
					</div>
					<p class="copyright">Copyright © 1998 - <span id="js_cpright_year">2018</span> Tencent. All Rights Reserved.</p>
					<p id="js_iosinfo" class="copyright">联系电话：0755-86013388 QQ群：55209235</p>
				</footer>
			</div>

			<!-------------第二页--------------------->
			<div class="see two">
				<div class="two_">
					<ul id="ttt">

					</ul>
					<p class="list_more">
						<a href="#">去客户端发现更多好音乐 &gt;</a>
					</p>
				</div>
			</div>
			<!-------------第三页--------------------->
			<div class="see three">
				<div class="s_frame">
					<div class="f_con">
						<i ></i>
						<input type="search" name="" id="" placeholder="搜索歌曲、歌单、专辑" />
					</div>
				</div>
				<div class="hot_keys">
					<h3>热门搜索</h3>
					<div class="result_tags">
						<a href="#" class="tag_s active">梦想的声音第二季</a>
						<a href="#" class="tag_s">JUST LIKE THIS</a>
						<a href="#" class="tag_s">像我这样的人</a>
						<a href="#" class="tag_s">普通DISCO</a>
						<a href="#" class="tag_s">我们不一样</a>
						<a href="#" class="tag_s">PSYCHO</a>
						<a href="#" class="tag_s">等你下课</a>
					</div>
				</div>
			</div>
		</div>
		</div>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//选项卡     
			function select() {
				var lis = document.querySelectorAll("ul li")
				var div = document.querySelectorAll(".see")
				//var i =document.querySelector(".xiahuaxian")
				lis.forEach(function(el, index) {
					el.addEventListener("click", function() {
						lis.forEach(function(g) {
							g.classList.remove("active")
						})
						div.forEach(function(g) {
							g.classList.remove("active");
						})
						el.classList.add("active");
						div[index].classList.add("active");
					})
				})
			}
			select();
			
			//获取数据------第一页
			function music(){
				var domain = "https://www.easy-mock.com/mock/5aaea91aa538cc0e6f4e0b3f/qq_music";
				function aj(method, url) {
					var xhr = new XMLHttpRequest();
					xhr.open(method, url);
					xhr.send();
					xhr.addEventListener("readystatechange", function() {
						if(xhr.readyState == 4 && xhr.status == 200) {
							console.log(xhr.response)
							add(xhr.response);
						}
					})
				}
				aj("GET", domain + "/music")
				function add(res) {
					var uuu=document.querySelector("#uuu");
					var sid=document.querySelector("#slider");
					var res = JSON.parse(res);
					var arr = res.data.songList;
					var arr_sid=res.data.slider;
					var template = "";
					var template_sid="";
					arr.forEach(function(e) {
						var qwe = e.accessnum / 10000
						template += 
						`
           	   	       <li class="js_play_radio">
				            <a class="list_main" href="javascript:;">
				                <div class="list_media">
				                    <img src="${e.picUrl}" alt="">
				                    <span class="listen_count">
				                    	${qwe.toFixed(1)+"万"}
				                    </span>	
				                </div>
				                <div class="list_info">
				                    <h4>${e.songListDesc}</h4>
                					<p>${e.songListAuthor}</p>
				                </div>
				            </a>
				        </li>
	           	   	   `
					});
					arr_sid.forEach(function(e) {
						template_sid += 
						`
	           	   	   <div class="swiper-slide"><a href="${e.linkUrl}"><img src="${e.picUrl}" /></a></div>
	           	   	   `
					})
					uuu.innerHTML= template;
					sid.innerHTML=template_sid;
					
			//swiper插件
					
					function mySwiper() {
					  var mySwiper = new Swiper ('.swiper-container', {
			//		    direction: 'vertical',
					    loop: true,
					    autoplay: {
						  disableOnInteraction: false,
						},
					    
					    // 如果需要分页器
					    pagination: {
					      el: '.swiper-pagination',
					    },
					    
					    // 如果需要前进后退按钮
					    navigation: {
					      nextEl: '.swiper-button-next',
					      prevEl: '.swiper-button-prev',
					    },
					    
					    // 如果需要滚动条
			//		    scrollbar: {
			//		      el: '.swiper-scrollbar',
			//		    },
					  })        
					}
					mySwiper();
				}
				//获取数据------第二页
				function two(method, url, data) {
					var xhr = new XMLHttpRequest();
					xhr.open(method, url);
					xhr.send(data);
					xhr.addEventListener("readystatechange", function() {
						if(xhr.readyState == 4 && xhr.status == 200) {
							bdd(xhr.response)
							//console.log(xhr.response)
						}
					})
					function bdd(res) {
						var ttt=document.querySelector("#ttt");
						var res = JSON.parse(res);
						var pdd = res.data.topList;
						console.log(pdd)
						var template = ""
						pdd.forEach(function(e) {
							//var xsd=e.accessnum/10000
							//var je=xsd.toFixed(1)
							//console.log(je)
							template +=
							`
	           	   	       <li class="topic_item">
						        <div class="topic_main">
						            <a href="javascript:;" class="topic_media">
						                <img src="${e.picUrl}">
						                <span>1910.0万</span>
						            </a>
						            <div class="topic_info">
						                <div class="topic_cont">
						                    <h3>${e.topTitle}</h3>
						                    <p>1<span class="text_name">${e.songList[0].songname}</span>- ${e.songList[0].singername}</p>
						                    <p>2<span class="text_name">${e.songList[1].songname}</span>- ${e.songList[1].singername}</p>
						                    <p>3<span class="text_name">${e.songList[2].songname}</span>- ${e.songList[2].singername}</p>
						                </div>
						                <i class="topic_arrow"></i>
						            </div>
						        </div>
						    </li>
		           	   	    `
						})
						ttt.innerHTML += template;
					}
				}
				two("GET", domain + "/ranking")
				
			}
			music();
			

		</script>
	</body>

</html>